<template>
    <view class="order-detail-page" :data-theme="theme()" :class="theme() || ''">
        <!-- 订单状态 -->
        <view class="status-card">
            <view class="status-text">{{ order.orderStatusText }}</view>
            <view class="status-desc">
                <text v-if="order.extractStatus == 1">{{$t('writeoff.buyer_has_get')}}</text>
                <text v-else>{{$t('writeoff.buyer_not_get')}}</text>
            </view>
        </view>

        <!-- 订单信息 -->
        <view class="detail-card">
            <view class="card-title">{{$t('writeoff.ordering_information')}}</view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.order_id')}}</text>
                <text class="value">{{ order.orderNo }}</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.buyer')}}</text>
                <text class="value">{{ order.nickName }} (ID: {{ order.userId }})</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.pay_number')}}</text>
                <text class="value">{{ order.tradeNo || '-' }}</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.payment_method')}}</text>
                <text class="value">{{ order.payTypeText }}</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.payment_time')}}</text>
                <text class="value">{{ order.payTime }}</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.delivery_method')}}</text>
                <text class="value">{{ order.deliveryTypeText }}</text>
            </view>
        </view>

        <!-- 商品信息 -->
        <view class="detail-card">
            <view class="card-title">{{$t('writeoff.commodity_information')}}</view>
            <view class="product-item" v-for="item in order.productList" :key="item.orderProductId">
                <image class="product-image" :src="item.imagePath" mode="aspectFill"></image>
                <view class="product-info">
                    <view class="product-name">{{ item.productName }}</view>
                    <view class="product-spec">{{ item.productAttr }}</view>
                </view>
                <view class="product-price-qty">
                    <view class="price">¥{{ item.productPrice }}</view>
                    <view class="qty">x{{ item.totalNum }}</view>
                </view>
            </view>
            <view class="price-summary">
                <view class="summary-row">
                    <text>{{$t('writeoff.total_goods')}}</text>
                    <text>¥{{ order.orderPrice }}</text>
                </view>
                <view class="summary-row">
                    <text>{{$t('writeoff.shipping_fee')}}</text>
                    <text>¥{{ order.expressPrice }}</text>
                </view>
                <view class="summary-row actual-payment">
                    <text>{{$t('writeoff.disbursements')}}</text>
                    <text class="price">¥{{ order.payPrice }}</text>
                </view>
            </view>
        </view>

        <!-- 自提信息 -->
        <view class="detail-card">
            <view class="card-title">{{$t('writeoff.self_pickup_information')}}</view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.pickup_person')}}</text>
                <text class="value">{{ order.orderExtract && order.orderExtract.linkman }}</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.contact_number')}}</text>
                <text class="value">{{ order.orderExtract && order.orderExtract.phone }}</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.notes')}}</text>
                <text class="value">{{ order.buyerRemark || '-' }}</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.self_pickup_store')}}</text>
                <text class="value">{{ order.extractStore && order.extractStore.storeName }} (ID: {{ order.extractStore && order.extractStore.storeId }})</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.store_contact_person')}}</text>
                <text class="value">{{ order.extractStore && order.extractStore.linkman }}</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.store_phone_number')}}</text>
                <text class="value">{{ order.extractStore && order.extractStore.phone }}</text>
            </view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.store_address')}}</text>
                <text class="value">{{ order.extractStore && order.extractStore.address }}</text>
            </view>
        </view>

        <!-- 核销操作 -->
        <view class="detail-card">
            <view class="card-title">{{$t('writeoff.self_pickup_verification')}}</view>
            <view class="card-row">
                <text class="label">{{$t('writeoff.buyer_pickup_status')}}</text>
                <text class="value pickup-status">{{order.extractStatus != 1?$t('writeoff.not_yet'):$t('writeoff.have_up')}}</text>
            </view>
            <picker v-if="order.deliveryStatus == 10" @change="bindClerkChange" :value="clerk_index" :range="clerks" range-key="realName">
                <view class="card-row picker-row">
                    <text class="label">{{$t('writeoff.store_verification_personnel')}}</text>
                    <view class="picker-value">
                        <text>{{ clerks[clerk_index] && clerks[clerk_index].realName || $t('writeoff.select_a_verification_officer') }}</text>
                        <text class="iconfont icon-jiantou"></text>
                    </view>
                </view>
            </picker>
        </view>
        <view class="detail-card">
             <view class="card-title">{{$t('writeoff.shop_remark')}}</view>
              <textarea
                v-model="order.shopRemark"
                placeholder=""
                placeholder-class="textarea-placeholder"
                class="textarea"
                 v-if="order.deliveryStatus==10"
             />
             <view class="card-row" v-else>
                {{order.shopRemark||'-'}}
             </view>
            
           
        </view>
        <!-- 底部操作栏 -->
        <view class="bottom-actions" v-if="order.deliveryStatus == 10">
            <button class="action-btn theme-btn" @click="confirmWriteOff">{{$t('writeoff.confirm_verification')}}</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            order: {},
            clerks: [],
            clerk_index: 0,
            orderId: null
        }
    },
    onLoad(options) {
        this.orderId = options.orderId;
        this.getData();
    },
    methods: {
        getData() {
            if (!this.orderId) return;
            this._supplier_post('order/order/detail?orderId='+this.orderId, { orderId: this.orderId }, (res) => {
                this.order = res.data;
                this.clerks = res.data.shopClerkList || [];
            });
        },
        bindClerkChange(e) {
            this.clerk_index = e.detail.value;
        },
        confirmWriteOff() {
            const clerk = this.clerks[this.clerk_index];
            if (!clerk || !clerk.clerkId) {
                uni.showToast({
                    title:this.$t('writeoff.select_a_verification_officer'),
                    icon: 'none'
                });
                return;
            }
            uni.showModal({
                title:this.$t('common.tip'),
                content: this.$t('writeoff.cancel_this_order')+'？',
                success: (res) => {
                    if (res.confirm) {
                        // 调用核销接口
                        const params = {
                            orderId: this.orderId,
                            extractStatus: 1,
                            shopRemark: this.order.shopRemark || '',
                            extractClerkId: clerk.clerkId
                        };
                        this._supplier_post('order/operate/extract', params, (res) => {
                            uni.showToast({
                                title: this.$t('writeoff.verification_successful'),
                                icon: 'success'
                            });
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1500);
                        });
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.order-detail-page {
    background: #f7f8fa;
    padding-bottom: 160rpx;
    /* space for bottom actions */
    min-height: 100vh;
}

.status-card {
    background: linear-gradient(90deg, #4b8cff, #357aff);
    color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;

    .status-text {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
    }

    .status-desc {
        font-size: 26rpx;
        opacity: 0.9;
    }
}

.detail-card {
    background: #fff;
    border-radius: 16rpx;
    margin: 0 24rpx 24rpx;
    padding: 24rpx;

    .card-title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #f0f0f0;
    }
    .textarea{
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx;
    }
}

.product-item {
    display: flex;
    margin-top: 20rpx;

    .product-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        flex-shrink: 0;
        margin-right: 20rpx;
    }

    .product-info {
        flex: 1;

        .product-name {
            font-size: 28rpx;
            line-height: 1.4;
            margin-bottom: 10rpx;
        }

        .product-spec {
            font-size: 24rpx;
            color: #888;
        }
    }

    .product-price-qty {
        text-align: right;
        font-size: 28rpx;

        .qty {
            font-size: 24rpx;
            color: #888;
            margin-top: 10rpx;
        }
    }
}

.price-summary {
    padding-top: 20rpx;
    margin-top: 20rpx;
    border-top: 1rpx solid #f0f0f0;

    .summary-row {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;

        &.actual-payment {
            font-weight: bold;

            .price {
                color: #ff5050;
            }
        }

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    padding: 16rpx 0;

    .label {
        color: #888;
        flex-shrink: 0;
        margin-right: 20rpx;
    }

    .value {
        color: #333;
        text-align: right;
    }

    .pickup-status {
        color: #19be6b;
        font-weight: bold;
    }
}

.picker-row {
    .picker-value {
        display: flex;
        align-items: center;
        color: #333;
    }

    .picker-value .icon-jiantou {
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #999;
    }
}

.bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    z-index: 10;

    .action-btn {
        height: 88rpx;
        line-height: 88rpx;
        font-size: 32rpx;
        border-radius: 44rpx;
    }
}
</style>